<template>
  <div class="apartner">
    <div class="a_inner">
      <div class="a_inner_top">
        <div class="a_inner_top_title width256">
          <h1 v-text="lang.h1Text"></h1>
        </div>
        <h5 v-text="lang.h5Text"></h5>
      </div>
      
      <ul class="apartner_content">
        <li 
          v-for="(item, index) in partnerList"
          :key="index"
          :class="[item.class]"
          @mouseover="item.bool = true" 
          @mouseout="item.bool = false"
        ><a :href="item.url"><img :src="item.bool ? item.imgUrlHigh : item.imgUrlDef" alt=""></a></li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    lang: {
      type: Object,
    },
  },
  data () {
    return {
      partnerList: [
        { imgUrlDef: require("../images/partner/1_d.png"), imgUrlHigh: require("../images/partner/1_h.png"), bool: false, url: "//www.amberaigroup.com", class: ''},
        { imgUrlDef: require("../images/partner/2_d.png"), imgUrlHigh: require("../images/partner/2_h.png"), bool: false, url: "//www.orichal.io", class: ''},
        { imgUrlDef: require("../images/partner/3_d.png"), imgUrlHigh: require("../images/partner/3_h.png"), bool: false, url: "//www.mavensecurities.com", class: ''},
        { imgUrlDef: require("../images/partner/4_d.png"), imgUrlHigh: require("../images/partner/4_h.png"), bool: false, url: "//www.reuters.com",  class: 'no_mar'},
        { imgUrlDef: require("../images/partner/5_d.png"), imgUrlHigh: require("../images/partner/5_h.png"), bool: false, url: "//vhkd.io", class: ''},
        { imgUrlDef: require("../images/partner/6_d.png"), imgUrlHigh: require("../images/partner/6_h.png"), bool: false, url: "//www.bloomberg.com/asia", class: ''},
        { imgUrlDef: require("../images/partner/7_d.png"), imgUrlHigh: require("../images/partner/7_h.png"), bool: false, url: "//bitcoinfoundation.org", class: ''},
        { imgUrlDef: require("../images/partner/8_d.png"), imgUrlHigh: require("../images/partner/8_h.png"), bool: false, url: "//icspa.org",  class: 'no_mar'},
      ]
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="stylus">
.apartner 
  padding: 80px 0 40px;
  background: #152359;
  .a_inner
    .a_inner_top_title
      &.width256
        // width: 256px;
        margin-bottom: 20px;
    .apartner_content
      overflow: hidden;
      padding-top: 42px;
      &>li
        float: left;
        width: 270px;
        height: 120px;
        margin-right: 40px;
        margin-bottom: 40px;
        cursor: pointer;
        &>a
          display block
        &.no_mar
          margin-right: 0;


</style>
